<!--
 * @Date: 2019-12-13 14:39:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-15 18:00:28
 * @describe: -客源-详情page
 -->
<template>
  <div class="HousingPages">
    <el-row>
      <el-col :span="18">
        <span class="title_span">客源管理 - 客源详情</span>
      </el-col>
      <el-col :span="5" style="text-align:right">
        <el-button
          v-if="hasPermissionInfo('customer:customerinfo:update')"
          type="text"
          icon="el-icon-edit"
          @click="updateClick"
        >修改</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span
              class="font_wei600"
              style="font-size:18px"
            >客源编号：{{"KY - "+customerId.substring(customerId.length-6)}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">封盘</el-button>
          </div>
          <el-tabs v-model="activeName" class="customTabs" @tab-click="tabClick">
            <el-tab-pane name="first">
              <div slot="label">
                <img src="~@/assets/img/基本信息.png" alt />
                <div class="text_center">基本信息</div>
              </div>
              <customerDetails
                @MaintainType="MaintainTypeFun"
                @CustomerObj="CustomerObjFun"
                ref="customerDetails"
              ></customerDetails>
            </el-tab-pane>
            <el-tab-pane name="genjin" v-if="hasPermissionInfo('customer:customerinfo:followPage')">
              <div slot="label">
                <img src="~@/assets/img/跟进记录.png" alt />
                <div class="text_center">跟进记录</div>
              </div>
              <customerfollow></customerfollow>
            </el-tab-pane>

            <el-tab-pane name="daikan">
              <div slot="label">
                <img src="~@/assets/img/带看记录.png" alt />
                <div class="text_center">带看记录</div>
              </div>
              <customervisit :customerId="customerId"></customervisit>
            </el-tab-pane>

            <el-tab-pane name="yixiang">
              <div slot="label">
                <img src="~@/assets/img/录入意向.png" alt />
                <div class="text_center">录入意向</div>
              </div>
              <!-- <customerintention ref='customerintention'></customerintention> -->
              <div v-if="intentionDialog">
                <intentionsellinfo
                  ref="intentionsellinfo"
                  :CustomerObj="CustomerObj"
                  @CloseDialog="CloseDialogFun"
                ></intentionsellinfo>
              </div>
              <!-- <div v-if="intentionDialog">
                <intentionleaseinfo
                  v-if="formState"
                  ref="intentionleaseinfo"
                  :CustomerObj="CustomerObj"
                  @CloseDialog="CloseDialogFun"
                ></intentionleaseinfo>
                <intentionsellinfo
                  v-else
                  ref="intentionsellinfo"
                  :CustomerObj="CustomerObj"
                  @CloseDialog="CloseDialogFun"
                ></intentionsellinfo>
              </div>-->
            </el-tab-pane>
            <el-tab-pane name="third">
              <div slot="label">
                <img src="~@/assets/img/需求匹配.png" alt />
                <div class="text_center">需求匹配</div>
              </div>
              <customerPipei></customerPipei>
            </el-tab-pane>
            <el-tab-pane name="fourth" v-if="hasPermissionInfo('customer:customerinfo:customerCore')">
              <div slot="label">
                <img src="~@/assets/img/状态变更.png" alt />
                <div class="text_center">核心内容</div>
              </div>
              <stateUpdateKY v-if="stateUpdateKY" :CustomerObj="CustomerObj"></stateUpdateKY>
            </el-tab-pane>
            <el-tab-pane name="syslogdetailed">
              <div slot="label">
                <img src="~@/assets/img/任务中心.png" alt />
                <div class="text_center">操作日志</div>
              </div>
              <syslogdetailed :customerId="customerId"></syslogdetailed>
            </el-tab-pane>
            <el-tab-pane name="tixingjilu">
              <div slot="label">
                <img src="~@/assets/img/提醒记录.png" alt />
                <div class="text_center">发布任务</div>
              </div>
              <sysremindadd v-if="sysremindAdd" ref="sysremindAdd"></sysremindadd>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="4" style="padding-left:16px">
        <el-card
          class="box-card"
          shadow="hover"
         
        >
          <div slot="header" class="clearfix">
            <span class="card_title">客户信息</span>
            <el-button
              v-if="hasPermissionInfo('customer:customerinfo:phone')"
              style="float: right; padding: 0px 0"
              type="text"
              @click="Viewlinks"
            >查看</el-button>
            <!-- <el-button style="float: right; padding: 0px 0" type="text" @click="getKYinformation">查看</el-button> -->
          </div>
          <div class="customerAgent" v-if="kehuView">
            <ul>
              <li>
                <span class="leable">客户姓名:</span>
                <span>{{CustomerObj.customerName}}</span>
              </li>
              <li>
                <span class="leable">电话1:</span>
                <span>{{CustomerObj.customerPhone1}}</span>
              </li>
              <li>
                <span class="leable">电话2:</span>
                <span>{{CustomerObj.customerPhone2}}</span>
              </li>
              <li>
                <span class="leable">电话3:</span>
                <span>{{CustomerObj.customerPhone3}}</span>
              </li>
              <!-- <li>
                <span class="leable">委托人:</span>
                <span>{{CustomerObj.clientName}}</span>
              </li>
              <li>
                <span class="leable">电话1:</span>
                <span>{{CustomerObj.clientPhone1}}</span>
              </li>
              <li>
                <span class="leable">电话2:</span>
                <span>{{CustomerObj.clientPhone2}}</span>
              </li>-->
            </ul>
          </div>
        </el-card>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_title">相关经纪人</span>
            <el-button
              style="float: right; padding: 0px 0"
              type="text"
              @click="Agentvisible=true"
              v-if="hasPermissionInfo('customerinfo:updateCustomerAgent')"
            >修改</el-button>
          </div>
          <div class="customerAgent">
            <ul>
              <!-- <li>
                <span class="leable">录入人:</span>
                <span>{{customerAgent.creator.name}}&nbsp;&nbsp;&nbsp;{{customerAgent.creator.phone}}</span>
              </li>-->
              <li>
                <span class="leable">经纪人:</span>
                <span>{{customerAgent.maintain.name}}&nbsp;&nbsp;&nbsp;{{customerAgent.maintain.phone}}</span>
              </li>
              <!-- <li>
                <span class="leable">房源图片:</span>
                <span>
                  <p
                    v-for="(item,index) in customerAgent.imageAgent"
                    :key="index"
                  >{{item.name}}&nbsp;&nbsp;&nbsp;{{item.phone}}</p>
                </span>
              </li>
              <li>
                <span class="leable">钥匙人:</span>
                <span>
                  <p
                    v-for="(item,index) in customerAgent.keyAgent"
                    :key="index"
                  >{{item.name}}&nbsp;&nbsp;&nbsp;{{item.phone}}</p>
                </span>
              </li>
              <li>
                <span class="leable">委办人:</span>
                <span>
                  <p
                    v-for="(item,index) in customerAgent.entrustAgent"
                    :key="index"
                  >{{item.name}}&nbsp;&nbsp;&nbsp;{{item.phone}}</p>
                </span>
              </li>-->
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修改经纪人 -->
    <el-dialog :visible.sync="Agentvisible" title="修改经纪人" :destroy-on-close="true" width="30%">
      <el-form
        :model="AgentForm"
        ref="AgentForm"
        :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"
        class="svgColor4"
      >
        <el-form-item label="经纪人部门">
          <el-cascader
            style="width:100%"
            v-model="deptSelectVal"
            :options="this.$store.state.DeptList"
            :show-all-levels="false"
            @change="deptIdChange"
            :props="deptProps"
            ref="myCascader"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="经纪人">
          <el-select
            v-model="AgentForm.userId"
            placeholder="请选择"
            style="width:100%"
            clearable
            :disabled="AgentForm.deptId==''"
          >
            <el-option
              v-for="item in maintainList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="Agentvisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="UpdateAgent()">{{ $t('confirm') }}</el-button>
      </template>
    </el-dialog>

    <component v-if="addOruUpdate" :is="zjName" ref="updateForm" @CloseDialog="CloseDialogFun"></component>
  </div>
</template>
<script>
import customerDetails from "./page/customerDetails";
import customerfollow from "./page/customerfollow";
import customervisit from "./page/customervisit";
import stateUpdateKY from "./page/stateUpdateKY";
import customerPipei from "./page/customerPipei";
import intentionleaseinfo from "./page/intentionleaseinfo-add-or-update";
import intentionsellinfo from "./page/intentionsellinfo-add-or-update";
import sysremindadd from "../sys/sysremind-add-or-update";
import syslogdetailed from "./page/syslogdetailed";
export default {
  name: "",
  data() {
    return {
      customerId: this.$route.query.ID,
      customerType: this.$route.query.customerType,
      // dataForm: {
      //     name: "",
      //     id: ""
      // },
      MaintainType: false,
      inputState: true,
      activeName: "first",
      LPimg: "",
      metroList: [],
      HousingUpdate: false,
      HousingUpdate2: false,
      HousingUpdate3: false,
      HousingUpdate4: false,
      customerAgent: {
        creator: {
          name: "",
          phone: ""
        },
        maintain: {
          name: "",
          phone: ""
        },
        entrustAgent: [],
        imageAgent: [],
        keyAgent: []
      },
      addOruUpdate: false,
      addUrl: "",
      CustomerObj: {},
      stateUpdateKY: false,
      formState: null,
      sysremindAdd: true,
      Agentvisible: false,
      AgentForm: {
        type: "1",
        customerId: this.$route.query.ID,
        customerType: this.$route.query.customerType,
        deptId: "",
        userId: ""
      },
      deptSelectVal: "",
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true
      },
      maintainList: this.$store.state.maintainList,
      kehuView: false,
      intentionDialog: false
    };
  },
  components: {
    customerDetails,
    customerfollow,
    customervisit,
    stateUpdateKY,
    intentionleaseinfo,
    intentionsellinfo,
    customerPipei,
    syslogdetailed,
    sysremindadd
  },
  computed: {
    zjName: {
      get: function() {
        this.addUrl;
        var myComponent = () => import(`${this.addUrl}`);
        return myComponent;
      }
    }
  },
  created() {
    this.getcustomerAgent();
    if (!this.$route.query.ID) {
      this.$router.push({
        name: "customer-customerhouseinfo"
      });
    }
  },
  mounted() {},
  methods: {
    //房源修改
    updateClick() {
      let _this = this;
      this.getUpdatePage();
      this.addOruUpdate = true;
      setTimeout(() => {
        _this.$refs.updateForm.dataForm.id = _this.customerId;
        _this.$refs.updateForm.init();
      }, 100);
    },
    getUpdatePage() {
      if (this.customerType == "6") {
        //买商
        this.addUrl = "./page/customermsinfo-add-or-update";
      } else if (this.customerType == "2") {
        //买写
        this.addUrl = "./page/customermxinfo-add-or-update";
      } else if (this.customerType == "4") {
        //买住
        this.addUrl = "./page/customermzinfo-add-or-update";
      } else if (this.customerType == "5") {
        //租商
        this.addUrl = "./page/customerzsinfo-add-or-update";
      } else if (this.customerType == "1") {
        //租写
        this.addUrl = "./page/customerzxinfo-add-or-update";
      } else if (this.customerType == "3") {
        //租住
        this.addUrl = "./page/customerzzinfo-add-or-update";
      }
    },
    //获取相关经纪人
    getcustomerAgent() {
      this.$http
        .get("/customer/customerinfo/getCustomerAgent", {
          params: {
            id: this.$route.query.ID,
            customerType: this.$route.query.customerType
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          if (res.data != []) {
            this.customerAgent = res.data;
          }
        })
        .catch(() => {});
    },
    MaintainTypeFun(val) {
      this.MaintainType = val;
    },
    CustomerObjFun(obj) {
      this.CustomerObj = obj;
      this.stateUpdateKY = true;
    },
    getKYinformation() {
      // this.$refs['customerDetails'].getCustomerDetails();
    },
    //客户电话
    Viewlinks() {
      let _this = this;
      _this.kehuView = true;
    },

    tabClick(obj) {
      if (obj.name == "yixiang") {
        this.intentionDialog = true;
        this.$nextTick(() => {
          this.$refs.intentionsellinfo.init();
        });
        // if (
        //   this.customerType == "1" ||
        //   this.customerType == "3" ||
        //   this.customerType == "5"
        // ) {
        //   //租
        //   this.formState = true;
        //   setTimeout(() => {
        //     this.$refs.intentionleaseinfo.init();
        //   }, 100);
        // } else if (
        //   this.customerType == "2" ||
        //   this.customerType == "4" ||
        //   this.customerType == "6"
        // ) {
        //   //买
        //   this.formState = false;
        //   setTimeout(() => {
        //     this.$refs.intentionsellinfo.init();
        //   }, 100);
        // }
      }
      if (obj.name == "tixingjilu") {
        // this.sysremindAdd = true;
        // setTimeout(() => {
        //
        this.$refs.sysremindAdd.dataForm.moduleId = this.$route.query.ID;
        this.$refs.sysremindAdd.dataForm.type = 1;
        this.$refs.sysremindAdd.init();
        // }, 100);
      }
    },
    CloseDialogFun() {
      this.addOruUpdate = false;
      this.intentionDialog = false;
    },
    //部门change
    deptIdChange(val) {
      let a = "";
      if (this.$refs.myCascader.getCheckedNodes()[0]) {
        a = this.$refs.myCascader.getCheckedNodes()[0].value;
        this.AgentForm.deptId = a;
        this.getUserList(a);
      } else {
        this.AgentForm.deptId = "";
      }
    },
    // 获取部门员工列表
    getUserList(deptId) {
      let _this = this;
      this.$http
        .get(`/sys/user/deptUserList`, {
          params: {
            deptId: deptId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.maintainList = res.data;
        })
        .catch(() => {});
    },
    //确认修改经纪人
    UpdateAgent() {
      let _this = this;
      this.$http
        .post(
          "/customer/customerinfo/updateCustomerAgent",
          {},
          {
            params: this.AgentForm
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("修改成功！");
          _this.Agentvisible = false;
          _this.getcustomerAgent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "修改失败"
          });
        });
    },
      //判断操作权限
    hasPermissionInfo(val) {
      let _this = this;
      let arr = _this.CustomerObj.permissionListDTO;
      if (arr && arr != []) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i];
          if (element.permission.indexOf(val) != -1 && element.state == true) {
            return true;
          }
        }
      } else {
        return false;
      }
    }
  },
  activated() {},
  watch: {
    $route(to, from) {
      if (to.name == "customerPage") {
        this.customerId = this.$route.query.ID;
        this.customerType = this.$route.query.customerType;
        this.kehuView = false;
        this.activeName = "first";
        this.getcustomerAgent();
      }
    }
  }
};
</script>
<style  scoped lang="scss">
.title_span {
  display: inline-block;
  font-size: 16px;
  color: rgb(116, 116, 116);
  line-height: 33px;
}
.Properties {
  height: 130px;
}
.PropertiesIMG {
  width: 180px;
  height: 100%;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.PropertiesIMG img {
  width: 100%;
  height: 100%;
}
.PropertiesName {
  float: left;
  margin-left: 20px;
}
.introduction {
  line-height: 22px;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.customerAgent {
  ul {
    li {
      overflow: hidden;
      padding: 10px 0px;
      color: rgb(121, 121, 121);
      span {
        // display: inline
        float: left;
      }
      .leable {
        width: 60px;
        display: inline-block;
      }
      p {
        margin: 0px;
        padding-bottom: 14px;
      }
    }
  }
}
</style>